<template>
  <div  class="box">
    <el-form ref="form"
             v-loading="loading"
             label-width="160px">
      <el-form-item v-for="(item,index) in publicData"
                    :label="item.name"
                    :key="index">
        <el-input :value="item.money"
                  style="width:300px;"
                  @blur="handleBlur(item,$event)">
          <template slot="append">{{item.unit}}</template>
        </el-input>
        <span class="help">{{item.help}}</span>
      </el-form-item>
      <el-form-item
        label="滤芯补助"
      >
        <el-radio v-model="radio" label="1" border @change="radioSubmit">是</el-radio>
        <el-radio v-model="radio" label="2" border @change="radioSubmit">否</el-radio>
      </el-form-item>
      <el-form-item label="提示:">
        鼠标释放焦点后修改数据！
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "settingPublic",
  data () {
    return {
      publicData: [],//公共设置数据
      oldPublicData: '',//旧数据对比，若一样则不提交
      loading: false, //加载状态
      radio: {},
      radioObj: {}
    }
  },
  methods: {
    async init () { //页面初始渲染数据
      this.loading = true;
      let res = await this.api.operatorSettingPublic({});
      this.publicData = res.data.filter((array,index)=> {
        if(
            index === 2 ||
            index === 6 ||
            index === 7
        ) {
          return array
        } else if(index === 0) {
          return array['name'] = '售卡分佣'
        }else if(index === 8) {
          this.radio = array['money'];
          this.radioObj = array;
        }
      });
      console.log()
      // this.publicData = res.data;
      // let helps = [
      //   ['维修厂售出一张卡，运营商所得分佣', '加盟费', '运营商提现时间间隔', '每月任务', '连续多少次投诉关停维修厂', '连续多少次未完成任务关停维修厂', '物料预警值', '延迟罚款'],
      //   ['￥', '￥', '%', '/月', '次', '次', '%', '￥']
      // ];
      let helps = [
              ['维修厂售出一张卡','运营商提现间隔时间','物料预警值','延迟罚款'],
              ['￥','天','%','￥']
      ];
      for (let i in this.publicData) {
        this.publicData[i]['help'] = helps[0][parseInt(i)];
        this.publicData[i]['unit'] = helps[1][parseInt(i)];
      }
      this.loading = false;
    },
    async handleBlur (value, e) {
      if (value.money == e.target.value || this.oldPublicData == e.target.value) return false;
      this.oldPublicData = e.target.value;
      let argumentsStr = {
        type: value.type,
        id: value.id,
        money: e.target.value,
        name: value.name
      };
      let res = await this.api.mdfOperatorSettingPublic(argumentsStr)
      this.$message({
        message: res.msg,
        type: res.code == 1 ? 'success' : 'error'
      })
    },
    async radioSubmit () {
      this.radioObj['money'] = this.radio;
      let res = await this.api.mdfOperatorSettingPublic(this.radioObj);
      this.$message({
        type: res.code ? 'success' : 'error',
        message: res.msg
      });
    }
  },
  mounted () {
    this.init();
  },
  watch: {
    // radio () {
    //   this.radioSubmit();
    // }
  }
}
</script>

<style scoped lang="scss">
.box {
  padding-top:20px;
}

span.help {
  color: #606266;
  vertical-align: middle;
  margin-left: 20px;
  font-size: 13px;
}
</style>
